<script setup>
import {reactive} from 'vue'
import {Transition} from 'vue'
import {LoginStore} from '@/stores/index.js'
import {
  ReplyCommentService,
  submitCommentService
} from '@/api/comment.js'

const store = LoginStore()
const props = defineProps({
  comment: {
    type: Array,
  },
  disabled: {
    type: Object,
    default: false
  }
})
const data = reactive({
  inputComment: '',
  showItemId: '',
  placeholder: '',
  commentId: '',
  replyId: '',
  showInput: false
})
// 点击回复
const showCommentInput = (item, item2) => {
  console.log('item', item)
  console.log('item2', item2)
  data.showItemId = item.id
  const username = store.access_username
  if (item2.parent_author == null) {
    data.commentId = item2.reply_author
  } else {
    data.commentId = item2.parent_author
    // 这是左边
    data.replyId = item2.reply_author
    // 这是右边
  }
  // 回复的主要流程是 右边变成左边，左边变成右边
  if (username) {
    if (username == item2.user.username) {
      data.placeholder = '添加自己的新回复评论'
    } else {
      data.placeholder = '回复@' + item2.user.username + ":" + item2.reply_content
    }
  } else {
    console.log('请先去登录')
  }
}
const commitReply = async () => {
  // 回复评论
  await ReplyCommentService(data.commentId, data.showItemId, data.replyId, data.inputComment)
      .then((res) => {
        console.log(res)
        data.showItemId = ''
      })
}
const cancel = () => {
  data.showItemId = null
  data.commentId = ''
  data.replyId = ''
  data.showInput = false
}

// 添加新评论功能
const showMyCommentInput2 = () => {
  data.showInput = true
}

// 提交自己新发的评论
const commitComment = async () => {
  const id = store.access_id
  await submitCommentService(id, data.inputComment)
      .then((res) => {
        console.log(res)
      })
}

// 给当前父评论添加新回复
const CommentInput = (item) => {
  data.showItemId = item.id
  data.commentId = store.access_id
  data.placeholder = '添加自己的新回复评论'
}

</script>

<template>
  <el-card shadow="always" style="width: 100%;height: 100%;margin-top: 10px;">
    <template #header>
      <el-button v-show="data.showInput==false" @click="showMyCommentInput2()">添加新评论</el-button>
      <Transition name="fade" mode="out-in" appear>
        <div class="input-wrapper" v-show="data.showInput === true">
          <el-input class="gray-bg-input"
                    v-model="data.inputComment"
                    type="textarea"
                    :rows="3"
                    autofocus
                    show-word-limit
                    :placeholder="data.placeholder"
          >
          </el-input>
          <div class="btn-control">
            <el-button type="danger" round class="cancel" @click="cancel">取消</el-button>
            <el-button class="btn" type="success" round @click="commitComment">确定</el-button>
          </div>
        </div>
      </Transition>
    </template>
    <div class="container">
      <div class="comment" v-for="item in props.comment" :key="item.id">
        <div class="info">
          <el-avatar>user</el-avatar>
          <div class="right">
            <div class="name">{{ item.user.username }}</div>
            <div class="date">{{ item.created_time }}</div>
          </div>
        </div>
        <div class="content">{{ item.content }}</div>

        <div class="control">
        <span class="like">
          <el-icon><Pointer/></el-icon>
          <span class="like-num">1人点赞</span>
        </span>
          <span class="reply-text" @click="CommentInput(item)">
              <i class="iconfont icon-comment"></i>
              <span>回复</span>
          </span>
        </div>

        <div class="reply">
          <div class="item" v-for="item2 in item.replies" :key="item2.id">
            <div class="reply-content">
              <span class="from-name">{{ item2.user.username }}</span><span>: </span>
              <span class="to-name" v-if="item2.parent">@{{ item2.parent.username }}</span>
              <span class="to-name" v-else></span>
              <span>{{ item2.reply_content }}</span>
            </div>
            <div class="reply-bottom">
              <span>{{ item2.reply_created_time }}</span>
              <!--             @click="showCommentInput(item2, )"-->
              <span class="reply-text" @click="showCommentInput(item,item2)">
                <i class="iconfont icon-comment"></i>
                <span>回复</span>
              </span>
            </div>
          </div>
          <Transition name="fade" mode="out-in" appear>
            <div class="input-wrapper" v-show="data.showItemId === item.id">
              <el-input class="gray-bg-input"
                        v-model="data.inputComment"
                        type="textarea"
                        :rows="3"
                        autofocus
                        show-word-limit
                        :placeholder="data.placeholder"
              >
              </el-input>
              <div class="btn-control">
                <span class="cancel" @click="cancel">取消</span>
                <el-button class="btn" type="success" round @click="commitReply">确定</el-button>
              </div>
            </div>
          </Transition>
        </div>
      </div>
    </div>
  </el-card>

</template>


<style scoped>
.container {
  padding: 0 10px;
  box-sizing: border-box;
}

.container .comment {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-bottom: 1px solid #e4e7ed;
}

.container .comment .info {
  display: flex;
  align-items: center;
}

.container .comment .info .avatar {
  border-radius: 50%;
}

.container .comment .info .right {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.container .comment .info .right .name {
  font-size: 16px;
  color: #606266;
  margin-bottom: 5px;
  font-weight: 500;
}

.container .comment .info .right .date {
  font-size: 12px;
  color: #909399;
}

.container .comment .content {
  font-size: 16px;
  color: #606266;
  line-height: 20px;
  padding: 10px 0;
}

.container .comment .control {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #909399;
}

.container .comment .control .like {
  display: flex;
  align-items: center;
  margin-right: 20px;
  cursor: pointer;
}

.container .comment .control .like.active,
.container .comment .control .like:hover {
  color: #409eff;
}

.container .comment .control .like .iconfont {
  font-size: 14px;
  margin-right: 5px;
}

.container .comment .control .comment-reply {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.container .comment .control .comment-reply:hover {
  color: #333;
}

.container .comment .control .comment-reply .iconfont {
  font-size: 16px;
  margin-right: 5px;
}

.container .reply {
  margin: 10px 0;
  border-left: 2px solid #c0c4cc;
}

.container .reply .item {
  margin: 0 10px;
  padding: 10px 0;
  border-bottom: 1px dashed #e4e7ed;
}

.container .reply .item .reply-content {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #606266;
}

.container .reply .item .reply-content .from-name {
  color: #409eff;
}

.container .reply .item .reply-content .to-name {
  color: #409eff;
  margin-left: 5px;
  margin-right: 5px;
}

.container .reply .item .reply-bottom {
  display: flex;
  align-items: center;
  margin-top: 6px;
  font-size: 12px;
  color: #909399;
}

.container .reply .item .reply-bottom .reply-text {
  display: flex;
  align-items: center;
  margin-left: 10px;
  cursor: pointer;
}

.container .reply .item .reply-bottom .reply-text:hover {
  color: #333;
}

.container .reply .item .reply-bottom .reply-text .icon-comment {
  margin-right: 5px;
}

.container .reply .write-reply {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #909399;
  padding: 10px;
  cursor: pointer;
}

.container .reply .write-reply:hover {
  color: #303133;
}

.container .reply .write-reply .el-icon-edit {
  margin-right: 5px;
}

.container .reply .fade-enter-active,
.container .reply .fade-leave-active {
  transition: opacity 0.5s;
}

.container .reply .fade-enter,
.container .reply .fade-leave-to {
  opacity: 0;
}

.container .reply .input-wrapper {
  padding: 10px;
}

.container .reply .input-wrapper .gray-bg-input,
.container .reply .input-wrapper .el-input__inner {
  background-color: #67c23a;
}

.container .reply .input-wrapper .btn-control {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 10px;
}

.container .reply .input-wrapper .btn-control .cancel {
  font-size: 16px;
  color: #606266;
  margin-right: 20px;
  cursor: pointer;
}

.container .reply .input-wrapper .btn-control .cancel:hover {
  color: #333;
}

.container .reply .input-wrapper .btn-control .confirm {
  font-size: 16px;
}

.control .reply-text {
  cursor: pointer;
}

.control .reply-text:hover {
  color: black;
}
</style>